Search for notes by fellow students, in your own course and all over the country.

Browse our notes for titles which look like what you need, you can preview any of the notes via a sample of the contents. After you're happy these are the notes you're after simply pop them into your shopping cart.

My Basket

You have nothing in your shopping cart yet.

Title: Reactjs Interview Questions
Description: React is a JavaScript-based UI development library. Facebook and an open-source developer community run it. Although React is a library rather than a language, it is widely used in web development. The library first appeared in May 2013 and is now one of the most commonly used frontend libraries for web development.in this notes i have done 300+ interview questions and answers so that is best for interview from my side

Document Preview

Extracts from the notes are below, to see the PDF you'll receive please use the links above


React Interview Questions & Answers
Click :star:if you like the project
...
Follow me [@SudheerJonna](https://twitter
...

Note: This repository is specific to ReactJS
...


Downloading PDF/Epub formats
You can download the PDF and Epub version of this repository from the latest
run on the actions tab
...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Questions
Core React
What is React?
What are the major features of React?
What is JSX?
What is the difference between Element and
Component?
How to create components in React?
When to use a Class Component over a Function
Component?
What are Pure Components?
What is state in React?
What are props in React?
What is the difference between state and props?
Why should we not update the state directly?
What is the purpose of callback function as an
argument of setState()?
What is the difference between HTML and React event
handling?
How to bind methods or event handlers in JSX
callbacks?
How to pass a parameter to an event handler or
callback?
What are synthetic events in React?
What are inline conditional expressions?
What is “key” prop and what is the benefit of using it
in arrays of elements?
What is the use of refs?
How to create refs?
What are forward refs?
1

No
...


Questions

60
61
62
63
64
65

How to use InnerHtml in React?
How to use styles in React?
How events are different in React?
What will happen if you use setState in constructor?
What is the impact of indexes as keys?
Is it good to use setState() in componentWillMount()
method?
What will happen if you use props in initial state?
How do you conditionally render components?
Why we need to be careful when spreading props on
DOM elements??
How you use decorators in React?
How do you memoize a component?
How you implement Server-Side Rendering or SSR?
How to enable production mode in React?
What is CRA and its benefits?
What is the lifecycle methods order in mounting?
What are the lifecycle methods going to be deprecated
in React v16?
What is the purpose of getDerivedStateFromProps()
lifecycle method?
What is the purpose of getSnapshotBeforeUpdate()
lifecycle method?
Do Hooks replace render props and higher order
components?
What is the recommended way for naming components?
What is the recommended ordering of methods in
component class?
What is a switching component?
Why we need to pass a function to setState()?
What is strict mode in React?
What are React Mixins?
Why is isMounted() an anti-pattern and what is the
proper solution?
What are the Pointer Events supported in React?
Why should component names start with capital letter?
Are custom DOM attributes supported in React v16?
What is the difference between constructor and
getInitialState?
Can you force a component to re-render without calling
setState?
What is the difference between super() and
super(props) in React using ES6 classes?
How to loop inside JSX?

66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

3

No
...

129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

Questions
React Router
What is React Router?
How React Router is different from history library?
What are the components of React Router
v4?
What is the purpose of push and replace methods of
history?
How do you programmatically navigate using React
router v4?
How to get query parameters in React Router v4
Why you get “Router may have only one child element”
warning?
How to pass params to history
...


Questions

162
163
164

How to use connect from React Redux?
How to reset state in Redux?
Whats the purpose of at symbol in the redux connect
decorator?
What is the difference between React context and
React Redux?
Why are Redux state functions called reducers?
How to make AJAX request in Redux?
Should I keep all component’s state in Redux store?
What is the proper way to access Redux store?
What is the difference between component and
container in React Redux?
What is the purpose of the constants in Redux?
What are the different ways to write
mapDispatchToProps()?
What is the use of the ownProps parameter in
mapStateToProps() and mapDispatchToProps()?
How to structure Redux top level directories?
What is redux-saga?
What is the mental model of redux-saga?
What are the differences between call and put in
redux-saga
What is Redux Thunk?
What are the differences between redux-saga and
redux-thunk
What is Redux DevTools?
What are the features of Redux DevTools?
What are Redux selectors and Why to use them?
What is Redux Form?
What are the main features of Redux Form?
How to add multiple middlewares to Redux?
How to set initial state in Redux?
How Relay is different from Redux?
What is an action in Redux?
React Native
What is the difference between React Native and
React?
How to test React Native apps?
How to do logging in React Native?
How to debug your React Native?
React supported libraries and Integration
What is reselect and how it works?
What is Flow?
What is the difference between Flow and PropTypes?

165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
188
189
190
191
192
193
194

6

No
...
js?
What is the difference between React and Angular?
Why React tab is not showing up in DevTools?
What are styled components?
Give an example of Styled Components?
What is Relay?
How to use TypeScript in create-react-app application?
Miscellaneous
What are the main features of reselect library?
Give an example of reselect usage?
Does the statics object work with ES6 classes in React?
Can Redux only be used with React?
Do you need to have a particular build tool to use
Redux?
How Redux Form initialValues get updated from state?
How React PropTypes allow different type for one
prop?
Can I import an SVG file as react component?
Why are inline ref callbacks or functions not
recommended?
What is render hijacking in React?
What are HOC factory implementations?
How to pass numbers to React component?
Do I need to keep all my state into Redux? Should I
ever use react internal state?
What is the purpose of registerServiceWorker in React?
What is React memo function?
What is React lazy function?
How to prevent unnecessary updates using setState?
How do you render Array, Strings and Numbers in
React 16 Version?
How to use class field declarations syntax in React
classes?
What are hooks?
What rules need to be followed for hooks?
How to ensure hooks followed the rules in your project?
What are the differences between Flux and Redux?
What are the benefits of React Router V4?
Can you describe about componentDidCatch lifecycle
method signature?

206
207
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231

7

No
...


Questions

267

What are the conditions to safely use the index as a
key?
Is it keys should be globally unique?
What is the popular choice for form handling?
What are the advantages of formik over redux form
library?
Why do you not required to use inheritance?
Can I use web components in react application?
What is dynamic import?
What are loadable components?
What is suspense component?
What is route based code splitting?
Give an example on How to use context?
What is the purpose of default value in context?
How do you use contextType?
What is a consumer?
How do you solve performance corner cases while using
context?
What is the purpose of forward ref in HOCs?
Is it ref argument available for all functions or class
components?
Why do you need additional care for component
libraries while using forward refs?
How to create react class components without ES6?
Is it possible to use react without JSX?
What is diffing algorithm?
What are the rules covered by diffing algorithm?
When do you need to use refs?
Is it prop must be named as render for render props?
What are the problems of using render props with pure
components?
How do you create HOC using render props?
What is windowing technique?
How do you print falsy values in JSX?
What is the typical use case of portals?
How do you set default value for uncontrolled
component?
What is your favorite React stack?
What is the difference between Real DOM and Virtual
DOM?
How to add Bootstrap to a react application?
Can you list down top websites or applications using
react as front end framework?
Is it recommended to use CSS In JS technique in React?

268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301

9

No
...
9?
What is the purpose of eslint plugin for hooks?
What is the difference between Imperative and
Declarative in React?
What are the benefits of using typescript with reactjs?
How do you make sure that user remains authenticated
on page refresh while using Context API State
Management?
What are the benefits of new JSX transform?
How does new JSX transform different from old
transform?
How do you get redux scaffolding using
create-react-app?
What are React Server components?
What is prop drilling?
What is state mutation and how to prevent it?
What is the difference between useState and useRef
hook?

303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325

326
327
328
329
330
331
332

10

Core React
1
...
It is used
for handling view layer for web and mobile apps
...
React was first
deployed on Facebook’s News Feed in 2011 and on Instagram in 2012
...

What are the major features of React?
The major features of React are:
• It uses VirtualDOM instead of RealDOM considering that RealDOM manipulations are expensive
...

• Follows Unidirectional data flow or data binding
...

� Back to Top
3
...
Basically it just provides syntactic sugar for the
React
...

In the example below text inside

tag is returned as JavaScript function to the render function
...
Component {
render()
{
return(

{'Welcome to React
world!'}



)
} }
� Back to Top
4
...
Elements can
11

contain other Elements in their props
...

Once an element is created, it is never mutated
...
createElement(
'div',
{id: 'login-btn'},
'Login'
)
The above React
...
render():
Login

Whereas a component can be declared in several different ways
...

In either case, it takes props as an input, and returns a JSX tree as the
output:
const Button = ({ onLogin }) =>
Login

Then JSX gets transpiled to a React
...
createElement(
'div',
{ id: 'login-btn', onClick: onLogin },
'Login'
)
� Back to Top
5
...

1
...
Those are pure JavaScript functions that accept props object
as the first parameter and return React elements:

12

“jsx harmony function Greeting({ message }) {

{Hello, ${message}‘}

return

} “‘
2
...
The above function component can be written as:
jsx harmony
render() {
} }

class Greeting extends React
...
props
...

When to use a Class Component over a Function Component?
If the component needs state or lifecycle methods then use class component otherwise use function component
...
8 with
the addition of Hooks, you could use state , lifecycle methods and other
features that were only available in class component right in your function
component
...

What are Pure Components?
React
...
Component except
that it handles the shouldComponentUpdate() method for you
...
Component on the other hand won’t compare current props and state to next out of the box
...

� Back to Top
8
...
We should always try to make
our state as simple as possible and minimize the number of stateful components
...
Component { constructor(props)
{ super(props)
this
...
state
...
e
...

� Back to Top
9
...
They are single values or objects containing a set of values that are passed to components on creation using a
naming convention similar to HTML-tag attributes
...


14

The primary purpose of props in React is to provide following component
functionality:
1
...

2
...

3
...
props
...

For example, let us create an element with reactProp property:
jsx harmony



This reactProp (or whatever you came up with) name then becomes a
property attached to React’s native props object which originally already
exists on all components created using React library
...
reactProp
� Back to Top
10
...
While both of them
hold information that influences the output of render, they are different
in their functionality with respect to component
...

� Back to Top
11
...

//Wrong
this
...
message = 'Hello world'
Instead use setState() method
...
When state changes, the component responds by rerendering
...
setState({ message: 'Hello World' })
Note: You can directly assign to the state object either in constructor or
using latest javascript’s class field declaration syntax
...

What is the purpose of callback function as an argument of
setState()?
The callback function is invoked when setState finished and the component
gets rendered
...

Note: It is recommended to use lifecycle method rather than this callback
function
...
log('The name has updated and component re-ren
� Back to Top
13
...
In HTML, the event name usually represents in lowercase as a convention:
}
� Back to Top
44
...
lazy function supports default exports only
...

It also ensures that tree shaking keeps working and don’t pull unused components
...
js
export const SomeComponent = /*
...
*/; and reexport MoreComponents
...
js javascript
// IntermediateComponent
...
/MoreComponents
...
/IntermediateComponent
...


32

Why React uses className over class attribute?
class is a keyword in JavaScript, and JSX is an extension of JavaScript
...

Pass a string as the className prop
...

What are fragments?
It’s a common pattern in React which is used for a component to return
multiple elements
...

jsx harmony render() {
return (
...
Fragment>
) }
There is also a shorter syntax, but it’s not supported in many tools:
jsx harmony render() {
return (




<>
) }



� Back to Top
47
...
Fragments are a bit faster and use less memory by not creating an
extra DOM node
...

2
...

3
...

� Back to Top
48
...


33

ReactDOM
...
The second argument is a DOM element
...

What are stateless components?
If the behaviour is independent of its state then it can be a stateless component
...
But unless you need to use a lifecycle hook in your components, you should go for function components
...

� Back to Top
50
...
These stateful components
are always class components and have a state that gets initialized in the
constructor
...
state = { count: 0 }
}
render() {
//
...
8 Update:
Hooks let you use state and other React features without writing classes
...

How to apply validation on props in React?
When the application is running in development mode, React will automatically check all props that we set on components to make sure they
have correct type
...
It’s disabled in production mode due to performance
impact
...

The set of predefined prop types:
1
...

3
...

5
...

7
...

9
...


PropTypes
...
string
PropTypes
...
object
PropTypes
...
node
PropTypes
...
bool
PropTypes
...
any

We can define propTypes for User component as below:
“‘jsx harmony import React from ‘react’ import PropTypes from ‘proptypes’
class User extends React
...
string
...
number
...
props
...
props
...
5 *PropTypes* were moved from `React
...
propTypes = {
name: PropTypes
...
isRequired,
age: PropTypes
...
isRequired
}
� Back to Top
52
...

2
...

4
...

JSX makes code easy to read and write
...

Easy to integrate with frameworks (Angular, Backbone) since it is
only a view library
...
Easy to write unit and integration tests with tools such as Jest
...

What are the limitations of React?
Apart from the advantages, there are few limitations of React too,
1
...

2
...

3
...

4
...


36

5
...

� Back to Top
54
...

A class component becomes an error boundary if it defines a new
lifecycle method called componentDidCatch(error, info) or static
getDerivedStateFromError():
“‘jsx harmony class ErrorBoundary extends React
...
state = { hasError: false } }
componentDidCatch(error, info) { // You can also log the error to an error
reporting service logErrorToMyService(error, info) }
static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI
...
state
...
’}
}
return this
...
children
}}
After that use it as a regular component:
```jsx harmony



� Back to Top
55
...

It has been renamed to
componentDidCatch in React v16
...

What are the recommended ways for static type checking?
Normally we use PropTypes library (React
...
5) for type checking in the React
applications
...

� Back to Top
57
...
Most of the components are not required to
use this module
...

2
...

4
...


render()
hydrate()
unmountComponentAtNode()
findDOMNode()
createPortal()

� Back to Top
58
...
If the React
element was previously rendered into container, it will perform an update
on it and only mutate the DOM as necessary to reflect the latest changes
...
render(element, container, [callback])
If the optional callback is provided, it will be executed after the component
is rendered or updated
...

What is ReactDOMServer?
The ReactDOMServer object enables you to render components to static
markup (typically used on node server)
...
The following methods can be used in both
the server and browser environments:
1
...
renderToStaticMarkup()
For example, you generally run a Node-based web server like Express,
Hapi, or Koa, and you call renderToString to render your root component
to a string, which you then send as response
...
/MyPage'
app
...
write('My Page')
res
...
write(renderToString())
res
...
end()
})
� Back to Top
60
...
Just like innerHTML, it is risky to use
this attribute considering cross-site scripting (XSS) attacks
...

In this example MyComponent uses dangerouslySetInnerHTML attribute
for setting HTML markup:
“‘jsx harmony function createMarkup() { return { __html: ‘First · Second’ } }
function MyComponent() { return
} “‘
� Back to Top
61
...
This is consistent with the DOM style
JavaScript property, is more efficient, and prevents XSS security holes
...
g
...
style
...

� Back to Top
62
...
React event handlers are named using camelCase, rather than lowercase
...
With JSX you pass a function as the event handler, rather than a
string
...

What will happen if you use setState() in constructor?
When you use setState(), then apart from assigning to the object state
React also re-renders the component and all its children
...
So
we need to use this
...

� Back to Top
64
...

In the below code snippet each element’s key will be based on ordering,
rather than tied to the data that is being represented
...

jsx harmony {todos
...
todo}

If you use element data for unique key, assuming todo
...

jsx harmony {todos
...
todo}

key={todo
...

Is it good to use setState() in componentWillMount() method?
Yes, it is safe to use setState() inside componentWillMount() method
...
componentWillMount() is
invoked immediately before mounting occurs
...
facebook
...

What is the purpose of ReactTestUtils package?
ReactTestUtils are provided in the with-addons package and allow you to
perform actions against a simulated DOM for the purpose of unit testing
...

What is Jest?
Jest is a JavaScript unit testing framework created by Facebook based on
Jasmine and provides automated mock creation and a jsdom environment
...

� Back to Top
150
...

Automatically mocks dependencies when running your tests
...

Runs your tests with a fake DOM implementation (via jsdom) so that
your tests can be run on the command line
...

� Back to Top
151
...
js file:
const sum = (a, b) => a + b
export default sum
Create a file named sum
...
js which contains actual test:

76

import sum from '
...
toBe(3)
})
And then add the following section to your package
...
/sum
...
js
� adds 1 + 2 to equal 3 (2ms)

React Redux
� Back to Top
152
...
It is not a framework or a library but a new kind
of architecture that complements React and the concept of Unidirectional
Data Flow
...

The workflow between dispatcher, stores and views components with distinct inputs and outputs as follows:

Figure 7: flux

77

� Back to Top
153
...
Redux can be used together with React, or with any
other view library
...

� Back to Top
154
...
Single source of truth: The state of your whole application is
stored in an object tree within a single store
...

2
...
This ensures that
neither the views nor the network callbacks will ever write directly
to the state
...
Changes are made with pure functions: To specify how the
state tree is transformed by actions, you write reducers
...

� Back to Top
155
...
Those are as follows:
1
...
You can enforce this with dev-only packages like
redux-immutable-state-invariant, Immutable
...

2
...

78

3
...

� Back to Top
156
...
todos, state
...

Redux wraps it in another function that looks like (…args) => dispatch(onTodoClick(…args)), and pass that wrapper function as a prop to
your component
...

Can I dispatch an action in reducer?
Dispatching an action within a reducer is an anti-pattern
...
Adding listeners and dispatching actions
within the reducer can lead to chained actions and other side effects
...

How to access Redux store outside a component?
You just need to export the store from the module where it created with
createStore()
...

store = createStore(myReducer)
export default store
� Back to Top
159
...
DOM manipulation is very expensive which causes applications to
behave slow and inefficient
...
Due to circular dependencies, a complicated model was created
around models and views
...
Lot of data changes happens for collaborative applications(like
Google Docs)
...
No way to do undo (travel back in time) easily without adding so
much extra code
...

Are there any similarities between Redux and RxJS?
These libraries are very different for very different purposes, but there are
some vague similarities
...
It is usually
used as an architecture for UIs
...
RxJS is a reactive programming library
...
Think of it as an
alternative to Promises
...
The Store observes actions from a distance, and changes
itself
...

� Back to Top
80

161
...

class App extends Component {
componentDidMount() {
this
...
fetchData()
}
render() {
return this
...
isLoaded
?
{'Loaded'}

:
{'Not Loaded'}

}
}
const mapStateToProps = (state) => ({
isLoaded: state
...

How to use connect() from React Redux?
You need to follow two steps to use your store in your container:
1
...

2
...
You can import connect() from react-redux
...
Component { render() { return
{this
...
containerData}
}}

81

function mapStateToProps(state)
state
...

How to reset state in Redux?
You need to write a root reducer in your application which delegate handling the action to the reducer generated by combineReducers()
...
As we know, reducers are supposed to return the
initial state when they are called with undefined as the first argument,
no matter the action
...
type === 'USER_LOGOUT') {
state = undefined
}
return appReducer(state, action)
}
In case of using redux-persist, you may also need to clean your storage
...
First, you
need to import the appropriate storage engine and then, to parse the state
before setting it to undefined and clean each storage state key
...
type === 'USER_LOGOUT') {
Object
...
forEach(key => {
storage
...

Whats the purpose of at symbol in the Redux connect decorator?
The **@** symbol is in fact a JavaScript expression used to signify decorators
...

Let’s take an example setting up Redux without and with a decorator
...
/actionCreators'
{ bindActionCreators } from 'redux'
{ connect } from 'react-redux'

function mapStateToProps(state) {
return { todos: state
...
Component {
//
...
/actionCreators'
{ bindActionCreators } from 'redux'
{ connect } from 'react-redux'

function mapStateToProps(state) {
return { todos: state
...
Component {
//
...
The
decorator syntax isn’t built into any JavaScript runtimes yet, and is still
experimental and subject to change
...

� Back to Top
165
...

Whereas Redux is much more powerful and provides a large number of
features that the Context API doesn’t provide
...

� Back to Top
166
...
Therefore, they act as a reducer of state
...
This state is then reduced (or accumulated) based on the action, and
then the next state is returned
...

� Back to Top
167
...


84

Let’s take an example of fetching specific account as an AJAX call using
fetch API :

export function fetchAccount(id) {
return dispatch => {
dispatch(setLoadingAccountState()) // Show a loading spinner
fetch(`/account/${id}`, (response) => {
dispatch(doneFetchingAccount()) // Hide loading spinner
if (response
...
json)) // Use a normal function to set the receive
} else {
dispatch(someError)
}
})
}
}
function setAccount(data) {
return { type: 'SET_Account', data: data }
}
� Back to Top
168
...

� Back to Top
169
...
This pattern is called Higher-Order Components, and is generally
the preferred way of extending a component’s functionality in React
...

Let’s take an example of component using connect:
import { connect } from 'react-redux'
import { setVisibilityFilter } from '
...
/components/Link'
const mapStateToProps = (state, ownProps) => ({
85

active: ownProps
...
visibilityFilter
})
const mapDispatchToProps = (dispatch, ownProps) => ({
onClick: () => dispatch(setVisibilityFilter(ownProps
...

class MyComponent {
someMethod() {
doSomethingWith(this
...
store)
}
}
� Back to Top
170
...

Container is an informal term for a component that is connected to a
Redux store
...

� Back to Top
171
...
It also prevents you from
introducing silly bugs caused by typos – in which case, you will get a
ReferenceError immediately
...
js or
actionTypes
...

export
export
export
export
export
export

const
const
const
const
const
const

ADD_TODO = 'ADD_TODO'
DELETE_TODO = 'DELETE_TODO'
EDIT_TODO = 'EDIT_TODO'
COMPLETE_TODO = 'COMPLETE_TODO'
COMPLETE_ALL = 'COMPLETE_ALL'
CLEAR_COMPLETED = 'CLEAR_COMPLETED'

In Redux, you use them in two places:
1
...
js:
import { ADD_TODO } from '
...
In reducers:
Let’s create reducer
...
/actionTypes'
export default (state = [], action) => {
switch (action
...
state,
{
text: action
...

What are the different ways to write mapDispatchToProps()?
There are a few ways of binding action creators to dispatch() in
mapDispatchToProps()
...

� Back to Top
173
...
So, if you
use a connected component:
“‘jsx harmony import ConnectedComponent from ‘
...

� Back to Top
174
...
Components: Used for dumb components unaware of Redux
...
Containers: Used for smart components connected to Redux
...
Actions: Used for all action creators, where file names correspond
to part of the app
...
Reducers: Used for all reducers, where files name correspond to
state key
...
Store: Used for store initialization
...

� Back to Top

88

175
...

It is available in NPM:
$ npm install --save redux-saga
� Back to Top
176
...
redux-saga is a redux middleware, which means this
thread can be started, paused and cancelled from the main application
with normal Redux actions, it has access to the full Redux application
state and it can dispatch Redux actions as well
...

What are the differences between call() and put() in reduxsaga?
Both call() and put() are effect creator functions
...
put() function creates an effect, which instructs middleware to
dispatch an action to the store
...


function* fetchUserSaga(action) {
// `call` function accepts rest arguments, which will be passed to `api
...
fetchUser, action
...

yield put({
type: 'FETCH_USER_SUCCESS',
userData
})
}

89

� Back to Top
178
...
The thunk can be used to delay the
dispatch of an action, or to dispatch only if a certain condition is met
...

� Back to Top
179
...

In most of the scenarios, Thunk uses Promises to deal with them, whereas
Saga uses Generators
...
But both middleware can coexist, so you can start with
Thunks and introduce Sagas when/if you need them
...

What is Redux DevTools?
Redux DevTools is a live-editing time travel environment for Redux with
hot reloading, action replay, and customizable UI
...

� Back to Top
181
...
Lets you inspect every state and action payload
...
Lets you go back in time by cancelling actions
...
If you change the reducer code, each staged action will be reevaluated
...
If the reducers throw, you will see during which action this happened,
and what the error was
...
With persistState() store enhancer, you can persist debug sessions
across page reloads
...

What are Redux selectors and why to use them?
Selectors are functions that take Redux state as an argument and return
some data to pass to the component
...
user
...
The selector can compute derived data, allowing Redux to store the
minimal possible state
2
...

What is Redux Form?
Redux Form works with React and Redux to enable a form in React to
use Redux to store all of its state
...

� Back to Top
184
...
Field values persistence via Redux store
...
Validation (sync/async) and submission
...
Formatting, parsing and normalization of field values
...

How to add multiple middlewares to Redux?
You can use applyMiddleware()
...

How to set initial state in Redux?
You need to pass initial state as second argument to createStore:
const rootReducer = combineReducers({
todos: todos,
visibilityFilter: visibilityFilter
})
const initialState = {
todos: [{ id: 123, name: 'example', completed: false }]
}
const store = createStore(
rootReducer,
initialState
)
� Back to Top
187
...
The main
difference is that relay only manages state originated from the server, and
all access to the state is used via GraphQL queries (for reading data)
and mutations (for changing data)
...

188
...
They are the only source of
information for the store
...

For example, let’s take an action which represents adding a new todo item:
92

{
type: ADD_TODO,
text: 'Add todo item'
}
� Back to Top

React Native
� Back to Top
188
...

React Native is a mobile framework that compiles to native app components, allowing you to build native mobile applications (iOS, Android,
and Windows) in JavaScript that allows you to use React to build your
components, and implements React under the hood
...

How to test React Native apps?
React Native can be tested only in mobile simulators like iOS and Android
...
io)
Where it syncs using QR code, your mobile and computer should be in
same wireless network
...

How to do logging in React Native?
You can use console
...
warn, etc
...
29
you can simply run the following to see logs in the console:
$ react-native log-ios
$ react-native log-android
� Back to Top
191
...
Run your application in the iOS simulator
...
Press Command + D and a webpage should open up at http://localhost:8081/debugger-ui
...
Enable Pause On Caught Exceptions for a better debugging experience
...
Press Command + Option + I to open the Chrome Developer tools,
or open it via View -> Developer -> Developer Tools
...
You should now be able to debug as you normally would
...

What is reselect and how it works?
Reselect is a selector library (for Redux) which uses memoization concept
...

Reselect keeps a copy of the last inputs/outputs of the last call, and recomputes the result only if one of the inputs changes
...
Whereas for initial state, you have to
provide a separate getInitialState method that returns the initial state
...
props
...
log(this
...
message);
},
render: function() {
return

Hello, {this
...
name}

;
}
});
Note: If you use createReactClass then auto binding is available for all
methods
...
e, You don’t need to use
...

� Back to Top
286
...

Actually it is convenient when you don’t want to set up compilation in your build
environment
...
createElement(component, props,
...

For example, let us take a greeting example with JSX,
class Greeting extends React
...
props
...
render(
,
document
...
Component {
render() {
return React
...
props
...
render(
React
...
getElementById('root')
);
� Back to Top
287
...
The diffing algorithms is generating
the minimum number of operations to transform one tree into another
...

In this case, displaying 1000 elements would require in the order of one
billion comparisons
...
Instead, React implements
a heuristic O(n) algorithm based on two assumptions:
1
...

2
...

� Back to Top
288
...
The
behavior is different depending on the types of the root elements
...
Elements Of Different Types: Whenever the root elements have
different types, React will tear down the old tree and build the new
tree from scratch
...

2
...
Lets take an example with same DOM elements except
className attribute,


3
...
React updates the props of the underlying component
instance to match the new element, and calls componentWillReceiveProps() and componentWillUpdate() on the underlying instance
...

4
...
For example, when adding an element at the end of the children, converting
between these two trees works well
...
Handling keys: React supports a key attribute
...
For example, adding a key can
make the tree conversion efficient,

  • Duke


  • 139

  • Villanova



  • Connecticut

  • Duke

  • Villanova


� Back to Top
289
...
Managing focus, text selection, or media playback
...
Triggering imperative animations
...
Integrating with third-party DOM libraries
...

Must prop be named as render for render props?
Even though the pattern named render props, you don’t have to use a
prop named render to use this pattern
...
e, Any prop that is a function
that a component uses to know what to render is technically a “render
prop”
...
x}, {mouse
...
Instead, you can keep it directly inside element,

{mouse => (

The mouse position is {mouse
...
y}


)}

While using this above technique(without any name), explicitly state that
children should be a function in your propTypes
...
propTypes = {
children: PropTypes
...
isRequired
};

140

� Back to Top
291
...
Because the shallow prop comparison will always
return false for new props, and each render in this case will generate a
new value for the render prop
...

� Back to Top
292
...
For example, if you would prefer to have
a withMouse HOC instead of a component, you could easily create one
using a regular with a render prop
...
Component {
render() {
return (
(
...
props} mouse={mouse} />
)}/>
);
}
}
}
This way render props gives the flexibility of using either pattern
...

What is windowing technique?
Windowing is a technique that only renders a small subset of your rows at
any given time, and can dramatically reduce the time it takes to re-render
the components as well as the number of DOM nodes created
...

Both react-window and react-virtualized are popular windowing libraries

141

which provides several reusable components for displaying lists, grids, and
tabular data
...

How do you print falsy values in JSX?
The falsy values such as false, null, undefined, and true are valid children
but they don’t render anything
...
Let’s take an example on how to convert to
a string,

My JavaScript variable is {String(myVariable)}
...

What is the typical use case of portals?
React portals are very useful when a parent component has overflow: hidden or has properties that affect the stacking context (e
...
z-index, position, opacity) and you need to visually “break out” of its container
...

� Back to Top
296
...
With an uncontrolled component, you might want React to
specify the initial value, but leave subsequent updates uncontrolled
...

render() {
return (
...
input} />



);
}
The same applies for select and textArea inputs
...

� Back to Top
297
...
It mainly uses Redux and redux-saga for state management and asynchronous side-effects,
react-router for routing purpose, styled-components for styling react
components, axios for invoking REST api, and other supported stack
such as webpack, reselect, ESNext, Babel
...
com/react-boilerplate/react-boilerplate and start working
on any new react project
...

What is the difference between Real DOM and Virtual DOM?
Below are the main differences between Real DOM and Virtual DOM,
Real DOM

Virtual DOM

Updates are slow
DOM manipulation is very expensive
...

It causes too much of memory wastage
Creates a new DOM if element updates

Updates are fast
DOM manipulation is very easy
You Can’t directly update HTML
There is no memory wastage
It updates the JSX if element update

� Back to Top
299
...
Using the Bootstrap CDN: This is the easiest way to add bootstrap
...

2
...
React Bootstrap Package: In this case, you can add Bootstrap to our
React app is by using a package that has rebuilt Bootstrap components to work particularly as React components
...
react-bootstrap
2
...

Can you list down top websites or applications using react as
front end framework?
Below are the top 10 websites using React as their front-end framework,
1
...

3
...

5
...

7
...

9
...


Facebook
Uber
Instagram
WhatsApp
Khan Academy
Airbnb
Dropbox
Flipboard
Netflix
PayPal

� Back to Top
301
...
css file as usual and refer to them using className
...
But If you want
to try a different approach(CSS-In-JS) then styled-components library is
a good option
...

Do I need to rewrite all my class components with hooks?
No
...
Because there are no plans to remove
classes in ReactJS
...

How to fetch data with React Hooks?
The effect hook called useEffect is used to fetch the data with axios from
the API and to set the data in the local state of the component with the
state hook’s update function
...
algolia
...
data);
})()
}, []);
return (

    {data
    ...
    map(item => (
  • ...
    url}>{item
    ...
    i
    ...

    � Back to Top
    304
    ...
    Currently there are no Hook equivalents to the uncommon
    getSnapshotBeforeUpdate and componentDidCatch lifecycles yet
    ...

    What is the stable release for hooks support?
    React includes a stable implementation of React Hooks in 16
    ...

    2
    ...

    4
    ...

    Why do we use array destructuring (square brackets notation)
    in useState?
    When we declare a state variable with useState, it returns a pair — an
    array with two items
    ...
    Using [0] and [1] to access them is
    a bit confusing because they have a specific meaning
    ...

    For example, the array index access would look as follows:
    var userStateVariable = useState('userProfile'); // Returns an array pair
    var user = userStateVariable[0]; // Access first item
    var setUser = userStateVariable[1]; // Access second item
    Whereas with array destructuring the variables can be accessed as follows:
    const [user, setUser] = useState('userProfile');
    � Back to Top

    146

    307
    ...
    Below are some of
    them,
    1
    ...
    Community experiments with render prop APIs such as Reactions
    Component
    3
    ...

    4
    ...

    5
    ...

    � Back to Top
    308
    ...
    You will need to use a ref to interact with the DOM node directly
    if you want to access imperative API of a web component
    ...

    � Back to Top
    309
    ...
    Getting values in and out of form state
    2
    ...
    Handling form submission
    � Back to Top
    310
    ...

    � Back to Top

    147

    311
    ...
    You need a transpiler to convert
    your JSX to regular Javascript that browsers can understand
    ...

    � Back to Top
    312
    ...

    � Back to Top
    313
    ...
    The
    react-scripts start command sets up the development environment
    and starts a server, as well as hot module reloading
    ...

    What are the features of create react app?
    Below are the list of some of the features provided by create react app
    ...
    React, JSX, ES6, Typescript and Flow syntax support
    ...
    Autoprefixed CSS
    3
    ...
    A live development server
    5
    ...
    A build script to bundle JS, CSS, and images for production, with
    hashes and sourcemaps
    7
    ...

    � Back to Top

    148

    315
    ...
    It also helps search engines to crawl your pages easily
    for SEO purposes
    ...

    � Back to Top
    316
    ...
    For reactJs application, you need to install below packages, bash
    npm install mobx
    --save
    npm install mobx-react --save
    � Back to Top
    317
    ...


    149

    Should I learn ES6 before learning ReactJS?
    No, you don’t have to learn es2015/es6 to learn react
    ...
    Let’s see some
    of the frequently used ES6 features,
    1
    ...
    props
    ...
    props
    ...
    props “‘
    2
    ...
    props} /> “‘
    3
    ...
    map(function (user) {
    return
  • {user
    ...
    map(user =>
  • {user
    ...

    What is Concurrent Rendering?
    The Concurrent rendering makes React apps to be more responsive by
    rendering component trees without blocking the main UI thread
    ...

    i
    ...
    You can enable this in two ways,
    // 1
    ...
    unstable_ConcurrentMode>

    ...
    Whole app using createRoot
    ReactDOM
    ...
    render();
    � Back to Top
    320
    ...
    Previously concurrent Mode being referred to
    as “Async Mode” by React team
    ...
    So it avoids
    the confusion from other approaches to Async Rendering
    ...

    Can I use javascript urls in react16
    ...
    Because URLs starting with javascript: are dangerous by including
    unsanitized output in a tag like and create a security hole
    ...
    website}>More details

    Remember that the future versions will throw an error for javascript URLs
    ...

    What is the purpose of eslint plugin for hooks?
    The ESLint plugin enforces rules of Hooks to avoid bugs
    ...
    In particular, the rule enforces that,
    1
    ...

    2
    ...

    � Back to Top
    323
    ...
    When you tap
    it, it turns blue if it was previously grey, and grey if it was previously blue
    ...
    likes() ) {
    if( hasBlue() ) {
    removeBlue();
    addGrey();
    } else {
    removeGrey();
    addBlue();
    }
    }
    Basically, you have to check what is currently on the screen and handle
    all the changes necessary to redraw it with the current state, including undoing the changes from the previous state
    ...

    In contrast, the declarative approach would be:
    if( this
    ...
    liked ) {
    return ;
    } else {
    return ;
    }
    Because the declarative approach separates concerns, this part of it only
    needs to handle how the UI should look in a sepecific state, and is therefore
    much simpler to understand
    ...

    What are the benefits of using typescript with reactjs?
    Below are some of the benefits of using typescript with Reactjs,
    1
    ...

    3
    ...


    It is possible to use latest JavaScript features
    Use of interfaces for complex type definitions
    IDEs such as VS Code was made for TypeScript
    Avoid bugs with the ease of readability and Validation

    � Back to Top
    325
    ...
    js
    ...


    152

    App
    ...
    /actions/auth';
    store
    ...
    js, wrap the
    AuthState in index
    ...
    js can access the auth context
    ...

    index
    ...
    /App';
    AuthState from '
    ...
    render(
    ...
    StrictMode>,
    document
    ...
    js
    const authContext = useContext(AuthContext);
    const { loadUser } = authContext;
    useEffect(() => {
    loadUser();
    },[])
    loadUser
    const loadUser = async () => {
    const token = sessionStorage
    ...
    data
    ...
    error(err);
    }
    }
    � Back to Top
    326
    ...
    It is possible to use JSX without importing React packages
    2
    ...
    The future improvements provides the flexibility to reduce the number of concepts to learn React
    ...

    How does new JSX transform different from old transform?
    The new JSX transform doesn’t require React to be in scope
    ...
    e, You
    don’t need to import React package for simple scenarios
    ...
    createElement('h1', null, 'Good morning!!');
    }
    New Transform:
    The new JSX transform doesn’t require any React imports
    function App() {
    return

    Good morning!!

    ;
    }
    Under the hood JSX transform compiles to below code
    import {jsx as _jsx} from 'react/jsx-runtime';
    function App() {
    return _jsx('h1', { children: 'Good morning!!' });
    }
    Note: You still need to import React to use Hooks
    ...

    How do you get redux scaffolding using create-react-app?
    Redux team has provided official redux+js or redux+typescript templates
    for create-react-app project
    ...

    2
    ...

    4
    ...
    Javascript template:
    npx create-react-app my-app --template redux
    2
    ...


    155

    What are React Server components?
    React Server Component is a way to write React component that gets rendered in the server-side with the purpose of improving React app performance
    ...

    Note: React Server Components is still under development and not recommended for production yet
    ...

    What is prop drilling?
    Prop Drilling is the process by which you pass data from one component of
    the React Component tree to another by going through other components
    that do not need the data but only help in passing it around
    ...

    What is state mutation and how to prevent it?
    State mutation happens when you try to update the state of a component without actually using setState function
    ...
    This is the main
    reason why it is advised to return new instances of state variables from
    the reducers by using Object
    ...

    This can cause unknown issues in the UI as the value of the state variable
    got updated without telling React to check what all components were
    being affected from this update and it can cause UI bugs
    ...
    component { constructor(props) {
    super(props); this
    ...
    state; loading = (() =>
    true)(); // Trying to perform an operation and directly saving in a state
    variable }
    “‘
    How to prevent it: Make sure your state variables are immutable by
    either enforcing immutability by using plugins like Immutable
    ...

    � Back to Top
    332
    ...
    useState causes components to re-render after state updates whereas
    useRef doesn’t cause a component to re-render when the value or
    state changes
    ...
    current) property
    ...
    useState allows us to update the state inside components
    ...

    � Back to Top

    Disclaimer
    The questions provided in this repository are the summary of frequently asked
    questions across numerous companies
    ...
    The primary purpose is for you to get a sense of
    what some companies might ask — do not get discouraged if you don’t know
    the answer to all of them — that is ok!
    Good luck with your interview �

    157


    Title: Reactjs Interview Questions
    Description: React is a JavaScript-based UI development library. Facebook and an open-source developer community run it. Although React is a library rather than a language, it is widely used in web development. The library first appeared in May 2013 and is now one of the most commonly used frontend libraries for web development.in this notes i have done 300+ interview questions and answers so that is best for interview from my side